import React, { Component } from 'react'

export default class index extends Component {
    static tips = <div className='tips'>
        <br />
        <br />
        <p>key是react的一个优化措施</p>
        <p>我们看一下list，他只会处于2种状态：1.显示全部，2.显示公羊</p>
        <p>状态1时，列表中有4个div；状态2时，列表中有3个div</p>
        <p>key是给节点一个标识，list1没有写key，react默认按元素的index作为key，list2按index为key</p>
        <p>当filter关闭时，list1和list2四个元素的key是0，1，2，3</p>
        <p>当filter开启时，list1和list2三个元素的key是0，1，2，前三个div的key并没有变</p>
        <p>所以当filter再次关闭时，数组中第四个元素沸羊羊的div从无道有被创建，沸羊羊打了招呼</p>
        <p>但当List3使用name作为key时，列表中沸羊羊的key还存在，美羊羊的key被筛选掉了，所以美羊羊再次回来时，打了招呼</p>
        <p style={{ color: 'red' }}>这是现象，让我们通过现象，还原一下react利用key做了什么吧</p>
        <p>index key</p>
        <p>关闭=》开启，前三个node id不变 第四个div被删除</p>
        <p>1.remove第四个node</p>
        <p>2.第二个node原来是美羊羊，但被筛选掉了，修改第二个node的innerText为下一只羊‘懒羊羊’</p>
        <p>3.第三个node原来是懒羊羊，但因为美羊羊被筛选掉了，修改第二个node的innerText为下一只羊‘沸羊羊’</p>
        <p>id key</p>
        <p>1.remove第二个node</p>
    </div>
    static official = 'https://react.docschina.org/docs/lists-and-keys.html'
    render() {
        return (
            <div>
                <p>例子比较多，但能很好的看出key的作用</p>
                <p>我希望在每个Sheep组件Mounted的时候，给大家打个招呼</p>
                <p>我通过筛选sex字段，将母羊筛选出去了，当我取消筛选条件时，我想要美羊羊给大家打招呼</p>
                <p>但效果是List1和List2的沸羊羊打了招呼</p>
                <p>只有List3标注了name为key的美羊羊正确的打了招呼</p>
                <div style={{
                    height: '1px',
                    margin: '16px',
                    background: 'black',
                }}></div>
                <List1 />
                <List2 />
                <List3 />
            </div>
        )
    }
}

class List1 extends Component {
    state = {
        showMan: false,
        list: [
            { name: '喜羊羊', sex: 1 },
            { name: '美羊羊', sex: 0 },
            { name: '懒羊羊', sex: 1 },
            { name: '沸羊羊', sex: 1 }
        ]
    }
    render() {
        const { list, showMan } = this.state
        return (
            <div>
                <div>这是一个没有key的列表</div>
                <label onClick={() => {
                    this.setState({ showMan: !this.state.showMan })
                }}>只看公羊<input checked={this.state.showMan} type="checkbox" /></label>
                <div>
                    {
                        list.filter(item => {
                            return showMan
                                ? item.sex === 1
                                : true
                        }).map(item => <Sheep {...item} />)
                    }
                </div>
            </div>
        )
    }
}
class List2 extends Component {
    state = {
        showMan: false,
        list: [
            { name: '喜羊羊', sex: 1 },
            { name: '美羊羊', sex: 0 },
            { name: '懒羊羊', sex: 1 },
            { name: '沸羊羊', sex: 1 }
        ]
    }
    render() {
        const { list, showMan } = this.state
        return (
            <div>
                <div>这是一个没有key为index的列表</div>
                <label onClick={() => {
                    this.setState({ showMan: !this.state.showMan })
                }}>只看公羊<input checked={this.state.showMan} type="checkbox" /></label>
                <div>
                    {
                        list.filter(item => {
                            return showMan
                                ? item.sex === 1
                                : true
                        }).map((item, index) => <Sheep {...item} key={index} />)
                    }
                </div>
            </div>
        )
    }
}
class List3 extends Component {
    state = {
        showMan: false,
        list: [
            { name: '喜羊羊', sex: 1 },
            { name: '美羊羊', sex: 0 },
            { name: '懒羊羊', sex: 1 },
            { name: '沸羊羊', sex: 1 }
        ]
    }
    render() {
        const { list, showMan } = this.state
        return (
            <div>
                <div>这是一个没有key为列表标识的列表</div>
                <label onClick={() => {
                    this.setState({ showMan: !this.state.showMan })
                }}>只看公羊<input checked={this.state.showMan} type="checkbox" /></label>
                <div>
                    {
                        list.filter(item => {
                            return showMan
                                ? item.sex === 1
                                : true
                        }).map((item) => <Sheep {...item} key={item.name} />)
                    }
                </div>
            </div>
        )
    }
}

class Sheep extends Component {
    componentDidMount() {
        this.say()
    }
    say() {
        const { name, sex } = this.props
        console.log(`我是${name}，我是一只${sex === 1 ? '公' : '母'}🐑`)
    }
    render() {
        const { name, sex } = this.props
        return <div style={{
            color: sex === 1 ? 'skyblue' : 'pink'
        }}>
            {name}
        </div>
    }
}